<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/hero.css">
</head>

<body>
  <a href="javascript:" class="create">创建英雄列表</a>
  <ul class="list">
    <!-- <li><img src="uploads/heros/01.jpg" title="司马懿"></li> -->
  </ul>

  <script>
    const datas = [{
        name: '司马懿',
        imgSrc: '01.jpg'
      },
      {
        name: '女娲',
        imgSrc: '02.jpg'
      },
      {
        name: '百里守约',
        imgSrc: '03.jpg'
      },
      {
        name: '亚瑟',
        imgSrc: '04.jpg'
      },
      {
        name: '虞姬',
        imgSrc: '05.jpg'
      },
      {
        name: '张良',
        imgSrc: '06.jpg'
      },
      {
        name: '安其拉',
        imgSrc: '07.jpg'
      },
      {
        name: '李白',
        imgSrc: '08.jpg'
      },
      {
        name: '阿珂',
        imgSrc: '09.jpg'
      },
      {
        name: '墨子',
        imgSrc: '10.jpg'
      },
      {
        name: '鲁班',
        imgSrc: '11.jpg'
      },
      {
        name: '嬴政',
        imgSrc: '12.jpg'
      },
      {
        name: '孙膑',
        imgSrc: '13.jpg'
      },
      {
        name: '周瑜',
        imgSrc: '14.jpg'
      },
      {
        name: 'XXX',
        imgSrc: '15.jpg'
      },
      {
        name: 'XXX',
        imgSrc: '16.jpg'
      },
      {
        name: 'XXX',
        imgSrc: '17.jpg'
      },
      {
        name: 'XXX',
        imgSrc: '18.jpg'
      },
      {
        name: 'XXX',
        imgSrc: '19.jpg'
      },
      {
        name: 'XXX',
        imgSrc: '20.jpg'
      }
    ]

    // 注册点击事件
    document.querySelector('.create').addEventListener('click', function () {
      // 遍历数组 使用forEach
      let str = ''
      datas.forEach(function (ele) {
        str += `
      <li><img src="uploads/heros/${ele.imgSrc}" title="${ele.name}"></li>
      `
      })
      document.querySelector('.list').innerHTML = str
    })
  </script>
</body>

</html>